<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3.SVG实现描边动画</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  :root {
    --c: skyblue;
  }

  .icon {
    fill: none;
    stroke: var(--c);
    stroke-width: 10;
    animation: stroke 5s linear infinite forwards;
  }

  @keyframes stroke {
    0% {
      stroke-dasharray: 8929;
      stroke-dashoffset: 8929;
    }

    100% {
      stroke-dasharray: 8929;
      stroke-dashoffset: 0;
    }
  }
</style>

<body>
  <svg t="1680771071369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3901" width="200" height="200">
    <path id="path" d="M955.9 360.5c-2.5-35.5-33.3-62.8-68.7-60.9h-75.6l-27.3-7.3-2 7.3H272.7l-27.6-104.2-0.8 0.2-5.9-20.2h-175v40l147.6 7.2 21.9 81.8c-22.3 9.2-38.7 30.5-40.5 56.1l-0.2 2.3 48.5 297.9c2.9 34 31.6 60.1 65.3 60.1 1.1 0 2.2 0 3.3-0.1h529.5c1.1 0.1 2.2 0.1 3.3 0.1 33.8 0 62.5-26.1 65.3-60.1l48.5-297.9v-2.3z m-243.8 201h-117v-91.6h141.6l-24.6 91.6z m66-91.6h120l-14.9 91.6H753.5l24.6-91.6z m-527.9 0h114.6l24.5 91.6H265.1l-14.9-91.6z m156 0H555v91.6H430.8l-24.6-91.6z m-10.7-40l-24.2-90.4h183.8v90.4H395.5z m159.6 171.6v79.2h-92.4l-21.2-79.2h113.6z m40 0h106.3l-21.2 79.2h-85.1v-79.2z m0-171.6v-90.4h176.5l-24.2 90.4H595.1z m-335.7-90.4h70.5l24.2 90.4H243.7l-11.2-68.6c2-13 13.6-22.6 26.9-21.8z m48.9 341.2h-0.6c-14 0.8-26.1-9.8-27.1-23.8l-0.1-0.9-8.9-54.5H400l21.2 79.2H308.3zM867.8 656l-0.1 0.9c-1 14-13.1 24.6-27.1 23.8H721.5l21.2-79.2h133.9l-8.7 53.6-0.1 0.9z m36.8-226.1H788.8l24.2-90.4h75.9c13.3-0.8 24.9 8.8 26.9 21.8l-11.2 68.6zM369.2 727.5c-34.4 0-62.3 27.9-62.3 62.3s27.9 62.3 62.3 62.3 62.3-27.9 62.3-62.3c0-34.3-27.9-62.3-62.3-62.3z m0 84.6c-12.3 0-22.3-10-22.3-22.3s10-22.3 22.3-22.3 22.3 10 22.3 22.3-10 22.3-22.3 22.3zM847.2 744.8c-12.6-11-29.1-17.3-45.3-17.3-17 0-32.2 6.9-42.9 19.4-9.6 11.3-14.9 26.5-14.9 42.9 0 34.4 27.9 62.3 62.3 62.3s62.3-27.9 62.3-62.3c0-16.7-7.9-33.1-21.5-45z m-40.8 67.3c-12.3 0-22.3-10-22.3-22.3 0-10.3 4.7-22.3 17.8-22.3 13.5 0 26.8 11 26.8 22.3 0 12.3-10 22.3-22.3 22.3z" p-id="3902"></path>
  </svg>
  <!-- <svg  t="1680772642051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5057" width="200" height="200">
    <path d="M523.048421 948.170105L200.919579 626.041263a35.031579 35.031579 0 1 1 49.55621-49.55621L523.048421 849.057684l343.363368-343.363368a175.292632 175.292632 0 1 0-247.915789-247.91579l-67.368421 67.368421a35.031579 35.031579 0 0 1-49.556211-49.55621l67.368421-67.368421a245.301895 245.301895 0 0 1 346.893474 346.920421z" p-id="5058"></path>
    <path d="M519.491368 948.170105L126.571789 555.250526A245.301895 245.301895 0 0 1 473.492211 208.330105l70.790736 70.790737a35.031579 35.031579 0 0 1-49.475368 49.529263l-70.790737-70.790737a175.292632 175.292632 0 1 0-247.915789 247.91579l343.363368 343.363368 272.599579-272.572631a35.031579 35.031579 0 0 1 49.556211 49.55621z" p-id="5059"></path>
  </svg> -->
</body>
<script>
  const len = document.getElementById('path').getTotalLength();
  console.log(len);
  console.log(0 * 1000 || 60 * 1000) //后者
  console.log(undefined * 1000 || 60 * 1000) //后者
  console.log(null * 1000 || 60 * 1000) //后者
  console.log('' * 1000 || 60 * 1000) //后者
  console.log(99 * 1000 || 60 * 1000) //前者

  console.log(!!true)//true
  console.log(!!undefined)//false
  console.log(!!false)//false
  console.log(!!null)//false
  console.log(!!'')//false
</script>

</html>